<template>
  <div class="driver-list-container">
    <div class="title-con">
      <div class="title-inner">
        <div @click="jdPhoneTap">监督电话：13113886628</div>
        <div>
          今日值班：<span>{{ dutyDriverName }}</span>
        </div>
        <div>温馨提示：用车申请通过后请及时与司机沟通。</div>
      </div>
      <van-search v-model="search" placeholder="司机姓名、车牌号、车辆类型" background="#f5f5f5" show-action @search="onSearch" @cancel="onCancel" />
    </div>
    <div class="car-list">
      <div v-for="(item, index) in [1,2,3]" :key="index" class="car-item">

        <img src="./a6b20e4914451fba0bbd06ab3f448e2f.png" class="car-main-pic" />
        <div class="car-bg">
          <span v-for="(item, index) in [1,2,3]" :key="index">类型：开始时间 类型 结束时间</span>
        </div>
        <div class="chose-bottom">
          <div class="flex align jB f24 caritem-title">
            <div class="flex align">
              <img src="../../assets/images/car.png" class="driver-photo" />
              <span class="mL10">车名称</span>
            </div>
            <van-icon name="phone-circle" @click="phoneTap('item.phone')" size="18px" class="mL20" />
          </div>
          <div class="f24 c6">
            <span>冀A0001</span>
            <span>-皮卡(5座)</span>
          </div>
          <div class="f24 c6">
            <span>备注：</span>
            <span>备注内容</span>
          </div>
          <div>
            <van-rate readonly allow-half void-icon="star" void-color="#eee" value="3" color="#ee0a24" size="16px" />
          </div>
        </div>
      </div>
      <div v-if="isLoading" class="bottom-tip">加载中...</div>
      <div class="bottom-tip" v-if="total === 0">暂无数据</div>
      <div class="bottom-tip" v-if="total > 8 && list.length === total">到底了~</div>
    </div>
    <img src="../../assets/images/fastTop.png" class="goTop" :hidden="showTop" @click="goTop" />
  </div>
</template>

<script>
import { Search, Icon, Rate } from 'vant';

export default {
  components: {
    'van-search': Search,
    'van-icon': Icon,
    'van-rate': Rate
  },
  data() {
    return {
      search: '',
      dutyDriverName: '',
      list: [],
      isLoading: false,
      total: 0,
      showTop: false
    };
  },
  methods: {
    jdPhoneTap() {
      // 监督电话点击事件处理
    },
    onSearch() {
      // 搜索事件处理
    },
    onCancel() {
      // 取消搜索事件处理
    },
    goDetailTap(item) {
      // 详情点击事件处理
    },
    phoneTap(phone) {
      // 电话点击事件处理
    },
    goTop() {
      // 返回顶部事件处理
    }
  }
};
</script>

<style scoped>
.driver-list-container {
  background: #f5f5f5;
  font-size: 14px;
  min-height: 100%;
}

.title-con {
  position: fixed;
  background: #fff;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.title-inner {
  background: #FFF;
  padding: 20px;
  font-size: 14px;
  text-align: left;
}

.car-list {
  margin-top: 150px;
  padding: 20px 20px 20px;
  /* background: #FFF; */
  text-align: left;
  display: flex;

  flex-wrap: wrap;
  justify-content: space-between;
}

.goTop {
  position: fixed;
  bottom: 4%;
  right: 5%;
  width: 46px;
  height: 46px;
  z-index: 100;
}

.car-item {
  /* padding: 10px; */
  background: #fff;
  border: 1px solid #CCCCCC;
  position: relative;
  margin-bottom: 14px;
  width: 44%;
  margin-right: 20px;
  display: inline-block;
}

.car-item:nth-of-type(2n) {
  margin-right: 0;
}

.chose-bottom {
  padding: 0 10px;
}

.car-main-pic {
  width: 100%;
  height: 120px;
}

.car-bg {
  position: absolute;
  width: 100%;
  height: 120px;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}

.car-bg span {
  color: #fff;
  margin: 0 5% 0;
  flex-wrap: nowrap;
  display: block;
}

.driver-photo {
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
.flex {
  display: flex;
}
.align {
  align-items: center;
}
.mL20 {
  margin-left: 20px;
  float: right;
}
.caritem-title {
  display: flex;
  justify-content: space-between;
}
.van-search__content {
  background: #fff;
}
</style>